<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" th:href="@{/js/index2.css}">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-pagination {
            text-align: right;
            padding: 15px;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatars {
            width: 178px;
            height: 178px;
            display: block;
        }

    </style>
</head>
<body class="hold-transition">
<div id="app" v-cloak>
    <div class="content-header" style="  padding: 10px;
    border-radius: 4px;
    background: white;
    margin-bottom: 10px;

">
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">评论管理</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <el-table
                    size="medium "
                    stripe highlight-current-row
                    current-row-key="id"
                    :data="tableData"
                    style="width: 100%; padding: 15px;border-radius: 4px;"
            >
                <el-table-column
                        type="index"
                        align="center"
                        label="序号"
                        width="80">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="articleName"
                        label="文章"
                        width="220">
                    <template slot-scope="scope">
                        <span style="color: #0BA4E0">{{scope.row.articleName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="content"
                        label="留言内容"
                        width="220">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="name"
                        label="姓名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        align="center"
                        width="220">
                </el-table-column>
                <el-table-column
                        prop="ip"
                        label="ip地址"
                        align="center"
                        width="150">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="time"
                        label="评论时间"
                        width="220">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="status"
                        label="状态"
                        width="60">
                    <template slot-scope="scope">
                        <span v-html="stateFormat(scope.row.status)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)" plain>回复</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, pager, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <el-dialog title="回复评论" :visible.sync="dialogFormVisibleEdit">
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item><span style="color:#000;"><b>{{addForm.name}}</b>（{{addForm.email}}）在你的文章<span
                        style="color: #0BA4E0">{{addForm.articleName}}</span>下评论：</span></el-form-item>
                <el-form-item>
                    <el-input v-model="addForm.content" type="textarea" disabled></el-input>
                </el-form-item>
                <el-form-item style="display: none">
                    <el-input><span style="color:#000;"></span></el-input>
                </el-form-item>
                <el-form-item label="回复内容" prop="content">
                    <br>
                    <el-input v-model="form.content" type="textarea"></el-input>
                    <el-checkbox v-model="checked">发送邮件通知ta</el-checkbox>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleEdit = false" plain>取 消</el-button>
                <el-button type="primary" @click="handleEdit()" plain>回 复</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--<script th:src="@{/js/vue.js}"></script>-->
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/axios-0.18.0.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.js"></script>
<script type="text/javascript" src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/jquery.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            text: '',
            length: '',
            tableData: [],
            totalData: {},
            statusCode: 0,//表示此页为回收站状态的博客 状态：0：发布，1：草稿,2:回收站
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 5,//每页显示的记录数
                total: 0,//总记录数
                queryString: 625 //查询条件 此处暂无
            },
            addForm: {},
            checked: false,
            form: {
                //status:0, //评论状态 0--未读  1---已读
                //articleId: id,
                type: 1,  //评论类型 0--读者留言 1---作者回复
            },
            formLabelWidth: '120px',
            dialogFormVisibleEdit: false, //控制编辑窗口显示隐藏
            rules: { //自定义校验规则
                content: [
                    {required: true, message: '回复内容不能为空', trigger: 'blur'}
                ]
            }
        },
        created() {
            this.findPage();//当VUE对象初始化完成分页查询
        },
        methods: {
            stateFormat(row) {
                if (row === 0) {
                    // return '已发布'
                    return '<span style="color:#F56C6C;">未读</span>'
                } else if (row === 1) {
                    return '<span style="color:#67C23A;">已读</span>'
                }
            },
            /**
             * 重置表单
             * */
            resetForm() {
                if (this.$refs['form'] !== undefined) {
                    this.$refs['form'].resetFields();
                    this.form = {};
                }

            },
            /**
             * 分页
             * */
            findPage() {
                axios.post("/admin").then((res) => {
                    this.pagination.queryString = res.data.data.id;
                    axios.post("/comment/search", this.pagination).then((res) => {
                        //格式化日期
                        for (let i = 0; i < res.data.data.rows.length; i++) {
                            let daterecentEditdate = new Date((res.data.data.rows)[i].time);
                            (res.data.data.rows)[i].time = daterecentEditdate.getFullYear() + "-" + (daterecentEditdate.getMonth() + 1) + "-" + daterecentEditdate.getDate() + " " + daterecentEditdate.getHours() + ":" + daterecentEditdate.getMinutes() + ":" + daterecentEditdate.getSeconds()
                        }
                        this.tableData = res.data.data.rows;
                        this.pagination.total = res.data.data.total;
                    });
                })
            },
            /**
             * 弹出回复框
             */
            handleUpdate(row) {  //进入回复页面
                this.resetForm();
                    axios.get("/comment/" + row.id).then((res) => {
                    if (res.data.flag) {
                        this.addForm = res.data.data;
                        this.findPage();
                    }
                });
                this.dialogFormVisibleEdit = true;
            },
            /**
             * 回复
             * */
            handleEdit() {
                //设置对应的留言Id
                this.form.replyId = this.addForm.id;
                this.form.type=1
                this.form.articleName = this.addForm.articleName;
                //如果勾选了发送邮件，就多发一个请求来去发送邮件
                if (this.checked === true) {
                    this.form.email = this.addForm.email;
                    console.log(this.form);
                    axios.post("/comment/sendEmail", this.form).then((res) => {
                        this.$message({
                            type: response.flag ? 'success' : 'error',
                            message: response.message
                        });
                    });
                }
                // 回复评论
                axios.post("/comment", this.form).then((res) => {
                    this.$message({
                        type: response.flag ? 'success' : 'error',
                        message: response.message
                    });
                });
                this.dialogFormVisibleEdit = false;
                this.findPage();

            },
            /**
             * 切换页码
             */
            handleCurrentChange(currentPage) {
                // 设置最新的页码
                this.pagination.currentPage = currentPage;
                //当切换页码的时候，需要重新调用findpPageF进行分页查询
                this.findPage();
            },
            /**
             * 删除此标签
             * */
            /*   handleDelete(row) {
                   this.$confirm("您确定要删除当前数据吗？", "提示", {
                       type: "warning"
                   }).then(() => {
                       axios.delete("/tag/" + row.id).then((res) => {
                           if (res.data.flag) {
                               this.$message.success(res.data.message)
                           }

                           this.findPage();
                       });
                   }).catch(() => {
                       console.log("用户点击了取消按钮")
                   }).finally(() => {

                   });
               }*/

        }
    });
</script>
</body>
</html>